<template>
  <div>
    <div class="goods-box" v-for="item of recoList" :key="item.id">
      <div class="top-img block">
        <img class="goods-img" :src="require('../../../img/home/' + item.recoImg)">
      </div>
      <div class="bottom-word block">
        <div class="goods-desc"><span>{{ item.recoDesc }}</span></div>
        <div class="goods-price">
          <span class="money">￥{{ item.recoPrice }}</span>
          <span class="pindan">{{ item.recoPin }}</span>
        </div>
      </div>
      <div class="seller block">
        <div class="title">
          <span>{{ item.recoSeller }}</span>
        </div>
        <div class="sellstars">
          五星好评</div>
      </div>
      <div class="intro block">
        <div class="title">介绍:</div>
        <div class="introimg block">
          <img class="intro-img" :src="item.recoIntro" />
        </div>
      </div>
    </div>
    <GoodsDetailFooter></GoodsDetailFooter>
  </div>
</template>

<script>
import Vue from 'vue';
import axios from 'axios'
import GoodsDetailFooter from './components/GoodsDetailFooter.vue';
export default {
  name: 'GoodsDetail',
  props: ['id'],
  // created() {
  //   this.getGoodsInfo()
  // },
  // beforeCreate() {
  //   Vue.prototype.$UserCart = Vue.prototype.$UserCart
  //   // 在此处定义全局变量，初始化为空数组
  // },
  components: { GoodsDetailFooter },
  data() {
    return { recoList: [] }
  },
  methods: {
    //获取json文件内容,
    // getGoodsInfo() {
    //   Vue.prototype.$UserCart.push(this.id)
    //   console.log(this.id);
    //   console.log(Vue.prototype.$UserCart)
    // },
    // data() {
    //   return {
    //     iconfontList: [],
    //     goodsInfo: []
    //   }
    // },
    getGoodsData() {
      axios.get('../static/Goods.json').
        then(this.getGoodsDataSucc)
    },
    getGoodsDataSucc(res) {//获取成功后,将内容放入全局data内
      res = res.data
      if (res) {
        this.recoList = res.filter
          (item => item.id.includes(this.$route.params.id));
      }
    },
  },
  mounted() {
    this.getGoodsData()//获取商品列表
    // this.$route.params.id; // 获取当前商品id
  }
}
</script>

<style scoped lang="stylus">
.block{
    margin-bottom .6em
    border-radius 10px
    width 100%
    padding .3em
    position relative //实现图片始终紧贴四壁
    display inline-block
    background-color white
}
.goods-box{
    height 100%
    padding .7em
    overflow hidden
    background-color #efeff4
  }
  .top-img{
    min-height 15em
    display inline-block
    float left
}
.goods-img{
    width 100%
    height 100%
    position absolute //实现图片始终紧贴四壁
    top 0
    left 0
    object-fit cover
    border-radius 10px
  }
  .goods-desc{
    margin .3rem
    width max-width
    height auto
    font-weight: bold; /* 加粗字体 */
    font-size: 18px; /* 设置字号为 20px */
    display -webkit-box
    overflow hidden
  }
  .money{
    float left
    margin .3rem
    color #f5812c
    font-weight bold
    font-size 1.4rem
  }
  .pindan{
    margin .3rem
    font-size .9rem
    float left
    color:#888
}
  .goods-price{
    max-width 100%
    left 0
  }
  .title{
    display:inline-block; 
    font-size: 18px;
    margin .3rem
  }
  .sellstars{
    display:inline-block; 
    float:right;
    color:#888
    font-size .9rem
    margin .3rem
  }
  .introimg{
    max-height: 100vh; /* 设置容器高度为屏幕高度 */
    overflow: auto; /* 添加滚动条 */
  }
  .intro-img{
    width 100%
    max-width: 100%; /* 图片大小适应容器 */
    height: auto; /* 保持图片比例不变 */
    display: block; /* 防止图片显示成 inline 元素导致出现间隙 */
    border-radius 10px
}
</style>